<!--  -->
<template>
  <el-card>
    <div class="filter-item"
         v-for="(filterItem,index) in dataForm[scriptItem.text]"
         :key="`${index}-filter`">
      <div class="filter-item-action-btn-group">
        <el-button type="danger"
                   icon="el-icon-delete"
                   circle
                   plain
                   size="mini"
                   :disabled="index === 0 && dataForm[scriptItem.text].length <= 1"
                   @click="deleteRow(index)"></el-button>
        <el-button type="primary"
                   icon="el-icon-plus"
                   circle
                   plain
                   size="mini"
                   @click="addRow(index)"></el-button>
      </div>
      <div class="filter-item-content">
        <el-form inline
                 class="filter-item-content-form">
          <el-form-item label="Type">
            <el-input v-model="filterItem[scriptItem.keyFields]"
                      :placeholder="scriptItem.keyHint"
                      style="width: 350px"></el-input>
          </el-form-item>
          <el-form-item label="Value">
            <el-input v-model="filterItem[scriptItem.valueFields]"
                      :placeholder="scriptItem.valueHint"
                      style="width: 350px"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-card>
</template>

<script>
import mixinTypeViewModule from '@/mixins/script-type-view-module'

export default {
  mixins: [mixinTypeViewModule],
  data () {
    return {
      keyList: [],
      dataForms: {
        sendfile: [{ type: '', value: '' }]
      },
      defaultFormSetting: {
        type: 'filters',
        label: 'Filters',

        keyLabel: 'Key',
        keyLabelWidth: 40,
        keyFields: 'key',
        keyFieldsWidth: 180,
        keyHint: '',

        optionLabel: 'If',
        optionLabelWidth: 40,
        optionFields: 'opt',
        optionFieldsWidth: 100,
        optionHint: '',

        valueLabel: 'Value',
        valueLabelWidth: 40,
        valueFields: 'value',
        valueFieldsWidth: 180,
        valueHint: ''
      },
      templateParamsValue: {
        key: '',
        value: '',
        opt: '',
        relation: 'and',
        type: 'text'
      }
    }
  },
  methods: {
    changeAndOr (index, relation) {
      this.$set(this.dataForm[this.scriptItem.text], index, { ...this.dataForm[this.scriptItem.text][index], relation })
    },
    addRow (index) {
      this.dataForm[this.scriptItem.text].splice(index + 1, 0, { ...this.scriptItem.defaultValue[0] })
    },
    deleteRow (index) {
      if (this.dataForm[this.scriptItem.text].length >= 1) {
        this.dataForm[this.scriptItem.text].splice(index, 1)
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  &-action-btn-group {
    width: 70px;
    height: 42px;
    vertical-align: baseline;
  }
  &-content {
    width: calc(100% - 180px);
    display: flex;
    align-items: center;
    &-form {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      .el-form-item .el-form-item {
        display: flex;
        align-items: center;
      }
    }
  }
  &-relation-btn-group {
    width: 110px;
    height: 42px;
    .el-button-group {
      vertical-align: baseline;
    }
  }
}
</style>
